<template>
	<view class="MembershipCode3 bigestBox">
		<view class="box box1">
			<view class="b1_top flex_jcsb smallFont">
				<view class="lishang">Lishang</view>
				<view class="code">60035233</view>
			</view>
			<view class="b1_bottom bigFont">尊贵会员</view>
		</view>
		<view class="box box2">
			<view class="b2_top flex_jcsb smallFont">
				<view class="lishang">Lishang</view>
				<view class="code">60035233</view>
			</view>
			<view class="b2_bottom bigFont">尊贵会员</view>
		</view>
		<view class="box box3">
			<view class="b3_top flex_jcsb smallFont">
				<view class="lishang">Lishang</view>
				<view class="code">60035233</view>
			</view>
			<view class="b3_bottom bigFont">尊贵会员</view>
		</view>
		<view class="box box4">
			<view class="b4_top flex_jcsb smallFont">
				<view class="lishang">Lishang</view>
				<view class="code">60035233</view>
			</view>
			<view class="b4_bottom bigFont">尊贵会员</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="less" scoped>
	@import "../../static/commonStyleLess/grayBox.less";

	.MembershipCode3 {
		padding-top: 20rpx;
		letter-spacing: 0px;
		padding-left: 56rpx;
		padding-right: 56rpx;

		//公共样式
		.bigFont {
			font-weight: 700;
			font-size: 48rpx;
			font-family: 'Alimama ShuHeiTi';
		}

		.smallFont {
			font-weight: 400;
			font-size: 34rpx;
			font-family: 'PingFang SC';
		}

		.box {
			width: 640rpx;
			height: 180rpx;
			border-top-left-radius: 32rpx;
			border-top-right-radius: 32rpx;
			margin: 80rpx auto 0 auto;
			padding: 40rpx;
			box-sizing: border-box;

			.code {
				margin-top: 8rpx;
			}
		}

		.box1 {
			margin: 60rpx auto 0 auto;
			background: linear-gradient(120.2deg, #FDF7F1 1.48%, #ED977A 68.39%), linear-gradient(123.71deg, rgba(253, 253, 253, 0.8) 2%, rgba(255, 255, 255, 0) 17.62%);
			box-shadow: 0px 8rpx 8rpx 0px #FFFFFF40 inset;

			.b1_top {
				color: #4C2921;

			}

			.b1_bottom {
				color: "#4E2A22";
			}
		}

		.box2 {
			background: linear-gradient(120.2deg, #DEE5F0 1.48%, #C2D3EB 68.39%),
				linear-gradient(123.71deg, rgba(253, 253, 253, 0.8) 2%, rgba(255, 255, 255, 0) 17.62%);
			box-shadow: 0px 8rpx 8rpx 0px #FFFFFF40 inset;

			.b2_top {
				color: #7487AF;
			}

			.b2_bottom {
				color: '#7487AF';
			}

		}

		.box3 {
			background: linear-gradient(120.2deg, #F4E1A1 1.48%, #F6CC64 68.39%), linear-gradient(123.71deg, rgba(253, 253, 253, 0.8) 2%, rgba(255, 255, 255, 0) 17.62%);
			box-shadow: 0px 8rpx 8rpx 0px #FFFFFF40 inset;


			.b3_top {
				color: '#E17F2A';
			}

			.b3_bottom {
				color: '#E38331';
			}

		}

		.box4 {
			background: linear-gradient(104.57deg, #DFE0E7 1.85%, #FAFBFF 47.53%, #E4E5EC 66.8%, #B3B4B8 98.85%),
				linear-gradient(123.71deg, rgba(253, 253, 253, 0.8) 2%, rgba(255, 255, 255, 0) 17.62%);
			box-shadow: 0px 8rpx 8rpx 0px #FFFFFF40 inset;

			.b4_top {
				color: "#121212";
			}

			.b4_bottom {
				color: "#121212";

			}

		}
	}
</style>